<!-- /* 
* @Author: zkz    
* @CreateTime: 2024-11-28 17:15:12
*/ -->
<template>
  <div class="container">
    <div class="left-menu">
      <ul class="menu_title">
        <li
          :class="{ active: activeIndex == index }"
          v-for="(item, index) in menuList[0].children"
          :key="index"
          @click="selectMenuItem(item, index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="right-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import menuList from "@/router/pages.js";
import { useRouter } from "vue-router";
import { ref } from "vue";
const activeIndex = ref(0);
const router = useRouter();
// 选择左侧菜单
const selectMenuItem = (item, index) => {
  activeIndex.value = index;
  router.push({
    name: item.name,
  });
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  .left-menu {
    width: 200px;
    height: auto;
    overflow-y: auto;
    border-right: 1px solid #f0f0f0;
    font-size: 16px;
    .menu_title {
      li {
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        color: #000;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        padding: 16px 20px;
        font-size: 14px;
      }
      .active {
        border-right: 4px solid #409eff;
        color: #3a8ee6;
        border-color: #3a8ee6;
        background-color: #ecf5ff;
        outline: none;
      }
    }
  }
  .right-content {
    flex: 1;
    height: auto;
    overflow-y: auto;
    padding: 20px;
  }
}
</style>